﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>00m: Sprite Example</title>
	<style type="text/css">
		body, html {
			width: 100%;
			height: 100%;
			margin: 0;
			background-color: #FFFFF0;
			overflow: hidden;
		}
	</style>
	<script src="../../../bootloader.js" type="text/javascript"></script>
	<script type="text/javascript">
		go = function() {
			c = new opus.Container({
				name: "top",
				parentNode: document.body,
				styles: {position: "absolute", border: 8, padding: 32, borderColor: "green"},
				defaultControlType: "Sprite",
				spriteList: "$library/opus/controls/images/systemToolbtns_16_16",
				controls: [
					{l:0, t:0, spriteCol: 0},
					{l:32, t:0, spriteCol: 1},
					{l:64, t:0, spriteCol: 2},
					{l:96, t:0, spriteCol: 3},
					{l:0, t:32, spriteCol: 4},
					{l:32, t:32, spriteCol: 5},
					{l:64, t:32, spriteCol: 6},
					{l:96, t:32, spriteCol: 7},
					{l:0, t:64, spriteCol: 8},
					{l:32, t:64, spriteCol: 9},
					{l:64, t:64, spriteCol: 10},
					{l:96, t:64, spriteCol: 11}
				]
			});
			// Fit our container to the screen
			resize();
			// Render everything
			c.render();
		}
		resize = function() {
			c.setBounds({w: document.body.offsetWidth, h: document.body.offsetHeight});
		}
	</script>
</head>
<body onload="go()" onresize="resize()">
</body>
</html>
